import ProForm, { DrawerForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import { Divider, Typography } from 'antd';
import Link from 'antd/es/typography/Link';
import 'dayjs/locale/zh-cn';
import React from 'react';

interface AddTaskShipinhaoProps {
  task: PromotionTaskBo.TaskBo;
  onRefurbish: (task: PromotionTaskBo.TaskBo) => void;
}

const AddTaskShipinhao: React.FC<AddTaskShipinhaoProps> = ({ task: editTask, onRefurbish }) => {
  const config = {
    logo: 'assets/promotion_icon_shipinhao.png',
    type: 3,
    typeName: '视频号',
  };

  return (
    <DrawerForm
      key="edit_promotion_task_drawer_form_shipinhao"
      title={
        <div
          style={{
            display: 'flex',
          }}
        >
          <img
            width={22.4}
            style={{
              margin: 'auto 2px',
            }}
            src={config.logo}
          />
          编辑任务 - {config.typeName}
        </div>
      }
      drawerProps={{
        maskClosable: false,
        destroyOnClose: true,
      }}
      trigger={<a>编辑</a>}
      onValuesChange={(visible: boolean) => {}}
      initialValues={{
        name: editTask.name,
        routeFinderUserName: editTask.routeFinderUserName,
        routeFeedId: editTask.routeFeedId,
        remarks: editTask.remarks,
        isDemandShare: editTask.isDemandShare,
      }}
      onFinish={async (values) => {
        let task = { ...values } as PromotionTaskBo.TaskBo;
        task.id = editTask.id;
        task.type = 2;
        task.typeName = config.typeName;
        task.logo = config.logo;

        onRefurbish(task);
        return true;
      }}
    >
      <ProForm.Group title={'任务内容'}>
        <ProFormText
          width="xl"
          name="name"
          label="标题"
          rules={[{ required: true, message: '请输入标题' }]}
          fieldProps={{
            allowClear: true,
            maxLength: 200,
          }}
        />

        <ProFormTextArea
          width="xl"
          name="routeFinderUserName"
          label="视频号FinderUserName（短的）"
          fieldProps={{
            allowClear: true,
            rows: 3,
            maxLength: 5000,
          }}
          rules={[{ required: true, message: '请输入视频号FinderUserName' }]}
        />

        <ProFormTextArea
          width="xl"
          name="routeFeedId"
          label="视频号FeedId"
          fieldProps={{
            allowClear: true,
            rows: 3,
            maxLength: 5000,
          }}
          rules={[{ required: true, message: '请输入视频号FeedId' }]}
        />

        <Typography.Paragraph>
          获取视频号ID的需要登录
          <Link target="_blank" href="https://channels.weixin.qq.com/platform/login">
            视频号助手
          </Link>
          ，在首页可以查看自己的视频号ID。
        </Typography.Paragraph>
      </ProForm.Group>
      <Divider />
      <ProForm.Group title={'其他'}>
        <ProFormTextArea
          width="xl"
          name="remarks"
          label="备注"
          fieldProps={{
            allowClear: true,
            rows: 3,
            maxLength: 200,
          }}
        />
      </ProForm.Group>
    </DrawerForm>
  );
};
export default AddTaskShipinhao;
